import React, { useState } from 'react';

const CanvasSizeSelector: React.FC = () => {
  const [width, setWidth] = useState<number>(800);
  const [height, setHeight] = useState<number>(600);

  const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setWidth(Number(e.target.value));
  };

  const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setHeight(Number(e.target.value));
  };

  return (
    <div>
      <label>
        Width:
        <input 
          type="number" 
          value={width} 
          onChange={handleWidthChange} 
          min={100} // 可以设置最小值
        />
      </label>
      <label>
        Height:
        <input 
          type="number" 
          value={height} 
          onChange={handleHeightChange} 
          min={100} // 可以设置最小值
        />
      </label>
      <canvas width={width} height={height} style={{ border: '1px solid black' }} />
    </div>
  );
};

export default CanvasSizeSelector;
